

export default  function  rainbowCursorSpeed ( {element } ) {

    const pointers = [],
        mouse = {
            x: 0,
            y: 0
        };
    let isMouseInside = false;
    const pointer = function () {
        this.x = 0;
        this.y = 0;
        this.node =     (function () {
            const n = document.createElement("div");
            n.className = "trail";
            n.style.position = "absolute";
            document.body.appendChild(n);
            return n;
        }())
    };

    pointer.prototype.draw = function() {
        this.node.style.left = this.x + "px";
        this.node.style.top = this.y + "px";
        this.node.style.display = isMouseInside ? "block" : "none";
    };

    for (let i = 0; i < 12; i++) {
        const d = new pointer();
        pointers.push(d);
    }

    function draw() {
        if (!isMouseInside) return;
        let x = mouse.x,
            y = mouse.y;

        pointers.forEach(function(pointer, index, pointers) {
            const nextpointer = pointers[index + 1] || pointers[0];

            pointer.x = x;
            pointer.y = y;
            pointer.draw();
            x += (nextpointer.x - pointer.x) * .6;
            y += (nextpointer.y - pointer.y) * .6;

        });
    }

    element.addEventListener("mouseenter", function(event) {
        isMouseInside = true;
    });
    element.addEventListener("mouseleave", () => {
        isMouseInside = false;
    });

    element.addEventListener("mousemove", (event) => {
        const rect = element.getBoundingClientRect();
        mouse.x = rect.clientX;
        mouse.y = rect.clientY;
    });


    function animate() {
        draw();
        requestAnimationFrame(animate);
    }

    animate();
}
